<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <base th:href="@{/}">
    <meta charset="UTF-8" />
    <title>尚硅谷会员登录页面</title>
    <link type="text/css" rel="stylesheet" href="static/css/style.css" />
<!--    <script src="js/vue.js"></script>-->
  <script src="static/script/vue.js"></script>
  </head>
  <body>


  <div id="app">

    <div id="login_header">
      <a href="index.html">
        <img class="logo_img" alt="" src="static/img/logo.gif"/>
      </a>
    </div>

    <div class="login_banner">
      <div id="l_content">
        <span class="login_word">欢迎登录</span>
      </div>

      <div id="content">
        <div class="login_form">
          <div class="login_box">
            <div class="tit">
              <h1>尚硅谷会员</h1>
            </div>
            <div class="msg_cont">
              <b></b>
              <!-- vue和Thymeleaf都对span标签进行渲染
                  在vue中获得Thymeleaf请求域中的值，最终让vue去渲染页面
-->
              <span class="errorMsg" >{{errMsg}}</span>
            </div>
            <div class="form">
              <form action="user?flag=login" method="post" @submit="checkLogin">
                <label>用户名称：</label>
                <input
                  class="itxt"
                  type="text"
                  placeholder="请输入用户名"
                  autocomplete="off"
                  tabindex="1"
                  name="username"
                  id="username"
                  v-model.trim="username"
                />
                <br />
                <br />
                <label>用户密码：</label>
                <input
                  class="itxt"
                  type="password"
                  placeholder="请输入密码"
                  autocomplete="off"
                  tabindex="1"
                  name="password"
                  id="password"
                  v-model.trim="password"
                />
                <br />
                <br />
                <input type="submit" value="登录" id="sub_btn" />
              </form>
              <div class="tit">
                <a href="user?flag=toregist">立即注册</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
  </div>
  <script>
    new Vue({
      "el":"#app",
      "data":{
        "username":"[[${param.username}]]",
        "password":"[[${param.password}]]",
        "errMsg":"[[${test2==null? '请输入用户名和密码':test2}]]"
      },
      "methods":{
        checkLogin(){
          if(this.username==""){
            this.errMsg = "用户名不能为空";
            event.preventDefault();
            return;
          }
          if(this.password==""){
            this.errMsg="密码不能为空";
            event.preventDefault();
          }
        }
      }
    });

  </script>
  </body>
</html>
